<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:app,
				// data是一个函数
				// vue在创建实例的过程中调用data函数,返回数据对象
				// 通过响应式包装后存储在实例的$data
				// 并且实例可以直接越过$data访问属性
				// $data响应式数据对象
				// $ _ __是vue提供的内置api,开发过程中应该避免使用这些前缀
				// data为什么必须是一个函数
				
				data(){
					return {
						eventname:'click',
						aatrr:'href',
						linkIndex:0,
						urls:[
							'https:www.taobao.com',
							'https:www.tmall.com',
							'https:www.jd.com',
						],
					}
					
				},
				methods:{
				chengIndex(index){
					this.linkIndex=index;
				}	
				}
			})
			console.log(vm);
			console.log(vm.$data.eventname)
			vm.$data.eventname='1';
			console.log(vm.eventname)
			//保证data引用的唯一性。
			var vm =new Vue({
				data(){
					return {
						a:1,
						b:2
					}
				}
			})
			console.log(vm.a)
			//共用一个引用
			// var data={a:1,b:2}
			// var vm1 =new Vue({
			// 	data:data
			// })
			// var vm2 =new Vue({
			// 	data:data
			// })
			// console.log(vm1.a)
			// console.log(vm1.a)
			function Vue(option){
				// 执行data函数,返回数据对象,并保存到实例的$data中
				this.$data=option.data();
				var _this = this;
				for (let key in this.$data) {
					(function(k){
						Object.defineProperty(_this,k,{
							get:function(){
								// 让实例可以直接调用$data中的数据
								return _this.$data[k];
							},
							set:function(newValue){
								// 让实例可以直接将数据存储到$data中
								_this.$data[k]=newValue;
							}
						})
					})(key);
				}
			}
		</script>
	</body>
</html>
